<template>
  <div>
    <!--页面主体-->
    <div class="login_box">
      <div class="container">
        <div class="login">
          <h2>用户登录</h2>
          <dl class="clearfloat">
            <dt><span class="tips" id="uname_prompt_text"></span>用户名：</dt>
            <dd>
              <input
                type="text"
                id="uname"
                placeholder="邮箱/手机号"
                v-model="uname"
              />
              <em class="icon_user"></em>
              <i class="icon_error" id="uname_prompt_icon"></i>
            </dd>
          </dl>
          <dl>
            <dt>
              <span class="tips" id="pwd_prompt_text">请输入密码</span>密码：
            </dt>
            <dd>
              <input
                type="password"
                id="pwd"
                placeholder="密码"
                v-model="upwd"
              />
              <em class="icon_pwd"></em>
              <i class="icon_error" id="pwd_prompt_icon"></i>
            </dd>
          </dl>
          <p>
            <label>
              <input type="checkbox" />
              <span>自动登录</span>
            </label>
          </p>
          <button type="button" id="login" @click="login">立 即 登 录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  data() {
    return {
      uname: "",
      upwd: "",
    };
  },
  methods: {
    ...mapMutations(['updateUser']),
    login() {
      const {uname,upwd} = this //解构
      let url ='user_login.php'
      // POST
      let params = `unameOrPhone=${uname}&upwd=${upwd}`
      // 用户 doudou 密码123456
      this.axios.post(url,params)
      .then(res => {
        console.log(res)
        if(res.data.code == 1){
          // 成功 —— 存储到Vuex里
          // this.$store.commit('updateUser',res.data)
          this.updateUser(res.data) //更新给vuex
          // 跳转到首页
          this.$router.push('/')
        }else{
          // 失败
          alert('登录失败')
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped></style>
